<template>
  function {{ fieldName }}Fun{
  <textarea ref = "codemirror" v-model = "code"
            placeholder = "测试 placeholder"
  ></textarea>
  }
</template>

<script>
//import Codemirror from "codemirror"; // language
// base style
import "codemirror/lib/codemirror.css";
// theme css
import "codemirror/theme/monokai.css";
import "codemirror/addon/hint/show-hint.css";
import "codemirror/addon/hint/show-hint"; // 自动提示
import "codemirror/addon/hint/javascript-hint";
// language
import "codemirror/mode/vue/vue.js";
// active-line.js
import "codemirror/addon/selection/active-line.js";
// styleSelectedText
import "codemirror/addon/selection/mark-selection.js";
import "codemirror/addon/search/searchcursor.js";
// highlightSelectionMatches
import "codemirror/addon/scroll/annotatescrollbar.js";
import "codemirror/addon/search/matchesonscrollbar.js";
import "codemirror/addon/search/match-highlighter.js";

// keyMap
import "codemirror/mode/clike/clike.js";
import "codemirror/addon/edit/matchbrackets.js";
import "codemirror/addon/comment/comment.js";
import "codemirror/addon/dialog/dialog.js";
import "codemirror/addon/dialog/dialog.css";
import "codemirror/addon/search/search.js";
import "codemirror/keymap/sublime.js";

// foldGutter
import "codemirror/addon/fold/foldgutter.css";
import "codemirror/addon/fold/brace-fold.js";
import "codemirror/addon/fold/comment-fold.js";
import "codemirror/addon/fold/foldcode.js";
import "codemirror/addon/fold/foldgutter.js";
import "codemirror/addon/fold/indent-fold.js";
import "codemirror/addon/fold/markdown-fold.js";
import "codemirror/addon/fold/xml-fold.js";
import "codemirror/mode/javascript/javascript.js";
import {ref} from "vue";
import {markRaw} from "@vue/reactivity";
import CodeMirror from "codemirror";

export default {
  name: "CodeMirror5CodeJs",
  setup(props, context) {
    console.log(props, context.attrs);
    const code = ref(context.attrs["value"]);
    const fieldName = ref(context.attrs["field-name"]);
    const editor = ref(null);
    return {code, fieldName, editor}
  },
  mounted() {
    let _this = this;
    const completeAfter = (cm, pred) => {
      if (!pred || pred()) {
        setTimeout(function () {
          if (!cm.state.completionActive) {
            cm.showHint({
              completeSingle: false,
            });
          }
        }, 100);
      }
      return CodeMirror.Pass;
    }
    const cmOptions = {
      mode: "javascript", // 语言模式
      theme: "monokai", // 主题
      lineNumbers: true, // 显示行号
      smartIndent: true, //智能缩进
      indentUnit: 4, // 智能缩进单元长度为 4 个空格
      styleActiveLine: true, // 显示选中行的样式
      matchBrackets: true, //每当光标位于匹配的方括号旁边时，都会使其高亮显示
      autofocus: true,
      showCursorWhenSelecting: true,
      autoRefresh: true,
      autocorrect: true,
      spellcheck: true,
      autoCloseBrackets: true, // 在键入时自动关闭括号和引号
      // eslint-disable-next-line no-undef
      hint: CodeMirror.hint.javascript,
      hintOptions: {
        completeSingle: false,
      },
      extraKeys: {
        // 自动补全的按键事件
        "Ctrl-Shift-F": _this.dataFormat,
        ".": completeAfter,
        "Ctrl-Enter": "autocomplete",
        "F11": function (cm) {
          cm.setOption("fullScreen", !cm.getOption("fullScreen"));
        },
      },
      // 代码折叠
      gutters: [
        "CodeMirror-lint-markers",
        "CodeMirror-linenumbers",
        "CodeMirror-foldgutter",
      ],
      foldGutter: true, // 启用行槽中的代码折叠
    };
    _this.editor = markRaw(CodeMirror.fromTextArea(_this.$refs.codemirror, cmOptions));
    _this.editor.setSize("auto", "95%");
    _this.editor.on("keyup", (cm, event) => {
      //A-Z 65-90
      //a-z 97-122
      //  alert(event.ctrlKey);
      if (!event.ctrlKey && event.keyCode >= 65 && event.keyCode <= 90) {
        // alert(22);
        cm.showHint({
          completeSingle: false,
        });
      }
    });
    setTimeout(() => {
      _this.editor.refresh();
    }, 100);
  },

  methods: {
    dataFormat: function () {
      const _this = this;
      _this.editor.refresh();
    },
  }
}
</script>

<style>
.cm-editor {
  height: 300px;
  border: 1px solid #ddd;
}

.cm-scroller {
  overflow: auto;
}
</style>
